import React from 'react';
import {
	inject,
	observer,
} from 'mobx-react';
import Top from './Top';
import Dialog from './Dialog';
import '../../style/tax.less';

@inject('hrmTax')
@observer
export default class Tax extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillMount() {
		const {
			hrmTax: store
		} = this.props;

		const {
			query
		} = this.props.location;

		store.exportQuery(query);
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init();
		}
	}

	componentDidMount() {
		this.init();
	}

	init = () => {
		const {
			hrmTax: store
		} = this.props, {
			isSingle
		} = store;
		if (!isSingle) {
			store.onTabChange('0');
		}
	}

	render() {
		const {
			hrmTax: store
		} = this.props, {
			dialog,
			subDialog,
			getMainDialogLoading,
			getMainDialogFormContainer,
			getSubDialogLoading,
			getSubDialogFormContainer,
			getDialogStyle,
		} = store;

		return (
			<div className='tax'>
				<Top ecId={`${this && this.props && this.props.ecId || ''}_Top@5wu756`} store={store}/>
				{dialog.visible &&<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@e3zul9`} 
					store={store} 
					dialog={dialog}
					loading={getMainDialogLoading()}
					formContainer={getMainDialogFormContainer()}
					style={getDialogStyle(true)}
					isMain={true}
				/>}
				{subDialog.visible&&<Dialog ecId={`${this && this.props && this.props.ecId || ''}_Dialog@5binfj`} 
					store={store} 
					dialog={subDialog}
					loading={getSubDialogLoading()}
					formContainer={getSubDialogFormContainer()}
					style={getDialogStyle(false)}
					isMain={false}
				/>}
			</div>
		);
	}
}